<style scoped>
</style>
<template>
	<div>

	 <Form ref="infoForm" :label-width="80" label-colon>
        <Row type="flex" justify="start" class="code-row-bg">
          <Col span="6">
            <FormItem label="原表名">
              <Input v-model="queryParams.dbId" placeholder="请输入源库表名称" clearable />
            </FormItem>
          </Col>
          <!-- <Col span="6">
            <FormItem label="原表名">
              <Input v-model="queryParams.srctable" placeholder="请输入源库表名称" clearable />
            </FormItem>
          </Col> -->
          <Col span="6">
            <Button type="primary"  style="margin-left:30px;" @click="getEtlUser(1)" class="info_button">查询</Button>
            		<Button type="info" :style="{marginLeft:'30px'}" @click="addDb">新增用户</Button>
          </Col>
        </Row>
      </Form>


		<Table stripe border :height="this.windowHeight - 200" :columns="columns" :data="data" ref="tables" size="small"
		 :tooltip-theme="menuTheme" :loading="loading"></Table>

		<Page :total="totals" show-sizer :style="{padding:'15px'}" :page-size="sizes" @on-change="swichPage"
		 @on-page-size-change="swichSize" />

		<Modal v-model="modal" title="添加用户" :mask-closable="false">
			<Add v-if="modal" v-on:fun="change" :allDBList="this.data" :selected="this.selected" />
			<div slot="footer" :style="{color:'#808695',fontSize:'12px',textAlign:'center'}">温馨提示：连接成功后才能保存</div>
		</Modal>
	</div>
</template>
<script>
	import Add from "./add";
	export default {
		name: "List",
		components: {
			Add
		},
		props: {
			menuTheme: String,
			windowHeight: Number
		},
		data() {
			return {
				loading: true,
				columns: [{
						title: "序号",
						type: "index",
						width: 70,
						align: "center"
					},
					{
						title: "账户",
						key: "account",
						tooltip: true,
						width: 110,
					},
					{
						title: "姓名",
						key: "fullName",
						tooltip: true,
						width: 110,
					},
					{
						title: "密码",
						key: "password",
						tooltip: true,
						width: 110,
					},					
					{
						title: "状态",
						key: "status",
						align: "center",
						width: 110,
						render: (h, params) => {
							if (params.row.status === 0) {
								return h(
									"Tag", {
										props: {
											color: "primary",
											type: "border"
										}
									},
									"禁用"
								);
							} else if (params.row.status === 1) {
								return h(
									"Tag", {
										props: {
											color: "warning",
											type: "border"
										}
									},
									"启用"
								);
							}
						}
					},
					{
						title: "用户类型",
						key: "userType",
						align: "center",
						width: 90,
						render: (h, params) => {
							if (params.row.userType === 0) {
								return h(
									"Tag", {
										props: {
											color: "success",
											type: "border"
										}
									},
									"普通用户"
								);
							} else if (params.row.userType === 1){
								return h(
									"Tag", {
										props: {
											color: "warning",
											type: "border"
										}
									},
									"管理员"
								);
							}
						}
					},
					{
						title: "创建时间",
						key: "createTime"
					},
					{
						title: "修改时间",
						key: "updateTime"
					},
					{
						title: "操作",
						width: 185,
						align: "center",
						fixed: "right",
						render: (h, params) => {
							return h("div", [
								h(
									"Button", {
										props: {
											type: "info",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.updateFun(params);
											}
										}
									},
									"修改"
								)
							]);
						}
					}
				],
				data: [],
				queryParams:{
					dbId:""
				},
				currentPage: 1,
				sizes: 20,
				totals: 0,
				modal: false,
				selected: {}
			};
		},
		methods: {
			//切换页码
			swichPage(page) {
				this.currentPage = page;
				this.getEtlUser(this.currentPage);
			},
			//切换每页容量
			swichSize(size) {
				this.sizes = size;
				this.getEtlUser(1);
			},
			//获取数据库列表
			async getEtlUser(pages) {
				const sizes = 20;
				const data = {
					pages,
					sizes
				};
				const result = await this.$api.getEtlUser(data);
				this.loading = false;
				if (result.code === 1) {
					this.data = result.data.list;
					console.log(this.data);
					this.totals = result.data.total;
				}
			},
			//打开添加页面
			addDb() {
				this.selected = {};
				this.modal = true;
			},
			//add组件callback方法
			change() {
				this.getEtlUser(1);
				this.modal = false;
			},
			//打开添加页面
			updateFun(data) {
				this.selected = {...data.row};
				this.modal = true;
			},
		},
		mounted() {
			this.getEtlUser(1);
		}
	};
</script>
